<template>
  <header class="course-header">
    <div class="course-title">课程管理</div>
    <n-input
      v-model:value="searchParams.title"
      placeholder="请输入课程名称..."
      :style="{ width: '30%' }"
      size="large"
      @keyup.enter="handleSearch"
    >
      <template #suffix>
        <n-button text style="font-size: 20px" @click="handleSearch">
          <n-icon>
            <Search />
          </n-icon>
        </n-button>
      </template>
    </n-input>
    <button class="btn-style" @click="handleAdd">创建课程</button>
  </header>
  <div v-if="loading" class="loading">
    <div class="spinner"></div>
    <p>正在加载课程数据...</p>
  </div>
  <div v-else-if="dataList.length === 0" class="empty-state">
    <div class="empty-icon">
      <i class="fas fa-book-open"></i>
    </div>
    <h2 class="empty-title">暂无课程</h2>
    <p class="empty-desc">您还未添加任何课程</p>
  </div>
  <div v-else>
    <n-grid cols="2 s:2 m:2 l:4 xl:4 2xl:4" responsive="screen" :x-gap="15">
      <n-grid-item v-for="(item, index) in dataList" :key="index" class="margin-bottom-30">
        <div class="box_shadow science">
          <div>
            <div class="list_img_box" @click="toDetail(item)">
              <img
                v-if="item.coverUrl"
                class="img_box all_img img_cover"
                :src="item.coverUrl"
                alt=""
              />
              <div
                v-else
                class="default-image"
              >
                <img class="icon-none" src="~@/assets/icons/none.png" alt="" />
                <span>未上传封面</span>
              </div>
            </div>
            <div class="text_ellipsis science_content text_ellipsis_2">{{ item.title }}</div>
            <div class="science_remark">{{
              item.createTime ? formatToDate(new Date(item.createTime)) : ''
            }}</div>
          </div>
        </div>
      </n-grid-item>
    </n-grid>
    <div class="flex justify-center margin-top-20">
      <n-pagination
        v-model:page="pageNum"
        :page-count="pages"
        size="large"
        :on-update:page="pageUpdate"
      />
    </div>
  </div>
  <course-write ref="writeRef" @finish="handleSearch" />
</template>

<script lang="ts" setup>
  import { ref, unref, onMounted } from 'vue';
  import { getCourseListApi, saveCourseApi } from '@/api/course/index';
  import { Search } from '@vicons/ionicons5';
  import { formatToDate } from '@/utils/dateUtil';
  import CourseWrite from './components/CourseWrite.vue';

  const emit = defineEmits(['edit']);

  const writeRef = ref();

  function handleAdd() {
    const write = unref(writeRef);
    write.openModal();
  }

  function toDetail(row: any) {
    emit('edit', row);
  }

  // 分页参数
  const pageNum = ref(1);
  const pageSize = 10;
  const loading = ref(false);
  const isLastPage = ref(false);
  const pages = ref(0);
  const dataList = ref<any[]>([]);

  const searchParams = ref({
    title: '',
  });

  function handleSearch() {
    resetPage();
    loadData();
  }

  async function loadData() {
    if (loading.value || isLastPage.value) return;

    loading.value = true;
    try {
      const params = {
        pageNum: pageNum.value,
        pageSize: pageSize,
        ...searchParams.value,
      };

      const data: any = await getCourseListApi(params);
      dataList.value = data.records || [];
      pages.value = data.pages;
      if (dataList.value.length < 10) {
        isLastPage.value = true;
      }
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  function resetPage() {
    pageNum.value = 1;
    isLastPage.value = false;
    dataList.value = [];
  }

  function pageUpdate(num: any) {
    pageNum.value = num;
    loadData();
  }

  onMounted(() => {
    loadData();
  });
</script>
<style lang="less" scoped>
  .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .course-title {
    font-size: 18px;
  }

  .science_content {
    margin-top: 10px;
    line-height: 25px;
    height: 50px;
  }

  .loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
  }

  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #4cb69b;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto 20px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
  }

  .empty-icon {
    font-size: 80px;
    color: #ddd;
    margin-bottom: 20px;
  }

  .empty-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #95a5a6;
  }

  .empty-desc {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 30px;
  }

  .img_cover {
    height: 140px;
  }

</style>

<style lang="less">
  .n-dialog.basicModal {
    width: 800px !important;
  }
</style>
